'use client';
import './page.scss';

import pageStyle from './pages.module.scss';
import { GlobeChart } from './components/GlobeChart';
import Header from '@/app/cg06/components/Header/index';
import CustomerStatistics from './components/CustomerStatistics';
import ShippingStatistics from './components/ShippingStatistics';
import AirliftStatistics from './components/AirliftStatistics';
import ServiceOrderStatistics from './components/ServiceOrderStatistics';
import ResourceLink from './components/ResourceLink';
import { Space } from 'antd';
import { useEffect } from 'react';
import ScrolledOrderNumber from './components/GlobeChart/ScrolledOrderNumber';
import { useAuth } from '@/app/cg06/hooks/useAuth';
// import CustomerTable from './components/CustomerTable';
import { SeawayChart } from './components/SeawayChart';
import Earth from "../earth/page";
import scaleApp from "@/app/cg06/utils/scaleApp";
import { useResizeReload } from "@/app/cg06/hooks/useResizeReload";
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

export default function SupplyChainNetwork() {
	useAuth();
	
	useResizeReload(500, true);
	
	return (
    <main className={pageStyle.main} id="app">
      <div
        style={{
          height: "100vh",
          flexShrink: 0,
          // position: 'fixed',
          // left: 0,
          // top: 0,
          paddingTop: px2vh(102),
          paddingLeft: px2vw(24),
          // paddingRight: 12,
          zIndex: 888,
        }}
      >
    
      </div>
      <div className={pageStyle.globeChartBox}>
          {/* <GlobeChart /> */}
          <Earth />
      </div>
      <div
        style={{
          height: "100vh",
          flexShrink: 0,
          // position: 'fixed',
          // right: 0,
          // top: 0,
          paddingTop: px2vh(102),
          paddingRight: px2vw(24),
          zIndex: 888,
        }}
      >
       
      </div>
    </main>
  );
}

